<template>
  <div class="soso_box">
    <div class="head">
      <span @click="kaiguan = true" :class="kaiguan ? 'active' : ''">
        局内用户管理
      </span>
      <span @click="kaiguan = false" :class="!kaiguan ? 'active' : ''">
        外部访客管理
      </span>
    </div>
    <div class="content">
      <!--局内用户管理-->
      <template v-if="kaiguan">
        <ul class="ipt">
          <li>
            用户名/姓名：
            <el-input
              v-model="keyword"
              placeholder="请输入"
              clearable
            ></el-input>
          </li>
          <li>
            所在机构：
            <el-cascader
              v-model="select"
              :options="downBox"
              :props="{ label: 'label', value: 'label' }"
              @change="handleChange"
              clearable
            ></el-cascader>
          </li>
          <li>
            状态：
            <el-select
              class="iipp"
              v-model="status"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in industry"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </li>
          <li>
            <span class="search btn-s" @click="setOptionByInside()">搜 索</span>
            <span class="clear-btn btn-s" @click="clear">清 空</span>
          </li>
        </ul>
        <div class="btn-group">
          <span class="add" @click="newUser()">新 增</span>
          <span @click="delUser">删 除</span>
        </div>
        <div class="project_main">
          <div class="project_tables table1">
            <el-table
              key="内部"
              :data="list2"
              ref="multipleTable1"
              border
              stripe
              row-key="id"
              style="width: 100%;"
              :height="539"
              tooltip-effect="light"
              :header-cell-style="{
                textAlign: 'center',
              }"
              :cell-style="{
                textAlign: 'center',
              }"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
                :reserve-selection="true"
              >
              </el-table-column>
              <el-table-column label="序号" width="60" fixed>
                <template slot-scope="scope">
                  <div>
                    {{ (rolePage - 1) * 10 + scope.row.index }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                prop="real_name"
                label="姓名"
                fixed
              ></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                prop="position"
                label="职务"
              ></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                prop="level"
                label="角色"
              ></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                prop="unit"
                label="所在机构"
              ></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                prop="section"
                label="所在部门"
              ></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                prop="leader"
                label="直属领导"
              ></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                prop="mobile"
                label="手机电话"
                width="130"
              ></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                prop="age"
                label="年龄"
              ></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                prop="sex"
                label="性别"
              ></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                prop="email"
                label="邮箱"
              ></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                prop="name"
                label="用户名"
              ></el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="创建时间">
                <template slot-scope="scope">
                  {{ scope.row.create_time.substr(0, 10) }}
                </template>
              </el-table-column>
              <el-table-column label="状态" fixed="right">
                <template slot-scope="scope">
                  <div
                    :style="{
                      color:
                        scope.row.status == '通过'
                          ? '#35BF69'
                          : scope.row.status == '在审'
                          ? '#F89718'
                          : scope.row.status == '驳回'
                          ? '#F15847'
                          : '',
                      cursor: 'default',
                    }"
                  >
                    {{ scope.row.status }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" fixed="right">
                <template slot-scope="scope">
                  <span
                    class="btn-o"
                    v-if="scope.row.status != '通过'"
                    @click="setOperateId(scope.row.id, 1)"
                  >
                    通过
                  </span>
                  <span
                    v-if="scope.row.status != '在审'"
                    class="btn-o"
                    @click="updateAccount(scope.row.id, 2)"
                  >
                    在审
                  </span>
                  <span
                    v-if="scope.row.status != '驳回'"
                    class="btn-o"
                    @click="setOperateId(scope.row.id, 3)"
                  >
                    驳回
                  </span>

                  <span class="btn-b" @click="userInsideInfo(scope.row.id)">
                    编辑
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="block">
            <el-pagination
              @current-change="handleCurrentChangejunei"
              :current-page.sync="rolePage"
              :page-size="10"
              layout=" prev, pager, next"
              :total="Number(total)"
            ></el-pagination>
          </div>
        </div>
      </template>
      <!--外部访问管理-->
      <template v-if="!kaiguan">
        <ul class="ipt">
          <li>
            用户名：
            <el-input
              v-model="keyword1"
              placeholder="请输入"
              clearable
            ></el-input>
          </li>
          <li style="margin-left:20px">
            <span class="search btn-s" @click="setOptionByOutside">搜 索</span>
            <span class="clear-btn btn-s" @click="clear">清 空</span>
          </li>
        </ul>
        <div class="project_main">
          <div class="project_tables table2">
            <el-table
              key="外部"
              :data="userList"
              ref="multipleTable2"
              border
              stripe
              row-key="id"
              :height="529"
              style="width: 100%;"
              tooltip-effect="light"
              :header-cell-style="{
                textAlign: 'center',
              }"
              :cell-style="{
                textAlign: 'center',
              }"
            >
              <el-table-column label="序号" width="60" fixed>
                <template slot-scope="scope">
                  <div>
                    {{ (page - 1) * 10 + scope.row.index }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                prop="real_name"
                label="姓名"
                fixed
              ></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                prop="name"
                label="用户名"
              ></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                prop="mobile"
                label="手机号"
              ></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                prop="age"
                label="年龄"
              ></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                prop="sex"
                label="性别"
              ></el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="注册时间">
                <template slot-scope="scope">
                  {{ scope.row.create_time.substr(0, 10) }}
                </template></el-table-column
              >
              <el-table-column
                :show-overflow-tooltip="true"
                prop="email"
                label="邮箱"
              ></el-table-column>
              <el-table-column label="状态" fixed="right">
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.status == 1"
                    style="fontSize:14px;fontWeight: bold;color: #333333;"
                    >启用</span
                  >
                  <span
                    v-else
                    style="fontSize:14px;fontWeight: bold;color: #F15847;"
                    >禁用</span
                  >
                  <el-switch
                    @change="ChangeStatus(scope.row.status, scope.row.id)"
                    v-model="scope.row.status"
                    active-color="#35BF69"
                    inactive-color="#999999"
                    :active-value="1"
                    :inactive-value="2"
                  ></el-switch>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="block">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="page"
              :page-size="10"
              layout="prev, pager, next"
              :total="Number(total2)"
            ></el-pagination>
          </div>
        </div>
      </template>
    </div>
    <el-dialog title="删除提醒" :visible.sync="showDel" @close="closeDel">
      <div><span class="tips">是否删除所选用户?</span></div>
      <div slot="footer" class="dialog-footer">
        <div class="qx" @click="closeDel">
          取消
        </div>
        <div class="qd" @click="deleteUser()">
          确 定
        </div>
      </div>
    </el-dialog>
    <el-dialog title="通过提醒" :visible.sync="showPass" @close="closeId">
      <div><span class="tips">是否通过此申请?</span></div>
      <div slot="footer" class="dialog-footer">
        <div class="qx" @click="closeId">
          取消
        </div>
        <div class="qd" @click="operate(1)">
          确 定
        </div>
      </div>
    </el-dialog>
    <el-dialog title="驳回提醒" :visible.sync="showReject">
      <div>
        <span class="tips">是否驳回此申请?</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="qx" @click="closeId">
          取消
        </div>
        <div class="qd" @click="operate(3)">
          确 定
        </div>
      </div>
    </el-dialog>
    <el-dialog
      class="add-dialog"
      :title="dType == 'add' ? '新增用户' : '编辑用户'"
      :visible.sync="showAdd"
    >
      <div class="add-content">
        <el-form
          :model="numberValidateForm"
          ref="numberValidateForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <div class="flex-box">
            <el-form-item
              label="姓名 :"
              prop="real_name"
              :rules="[{ required: true, message: '姓名不能为空' }]"
            >
              <el-input
                type="real_name"
                v-model="numberValidateForm.real_name"
                autocomplete="new-password"
                placeholder="请填写姓名"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="职务 :"
              prop="position"
              :rules="[{ required: true, message: '职务不能为空' }]"
            >
              <el-input
                type="position"
                v-model="numberValidateForm.position"
                autocomplete="new-password"
                placeholder="请填写职务"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="直属领导 :"
              prop="leader"
              :rules="[{ required: true, message: '直属领导不能为空' }]"
            >
              <el-input
                type="name"
                v-model="numberValidateForm.leader"
                autocomplete="new-password"
                placeholder="请填写直属领导"
              ></el-input>
            </el-form-item>
            <!-- </div>
          <div class="flex-box"> -->
            <el-form-item
              label="县区 :"
              prop="district_name"
              :rules="[{ required: true, message: '县区不能为空' }]"
            >
              <el-select
                v-model="numberValidateForm.district_name"
                placeholder="请选择县区"
                @change="changeDistrict"
              >
                <el-option
                  v-for="(item, index) in districtOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="组织机构 :"
              prop="organization"
              :rules="[{ required: true, message: '组织机构不能为空' }]"
            >
              <el-cascader
                v-model="numberValidateForm.organization"
                :options="downBox_not_district"
                :props="{ label: 'label', value: 'label' }"
                clearable
                placeholder="请选择组织机构"
              ></el-cascader>
            </el-form-item>
            <el-form-item
              label="角色 :"
              prop="role"
              :rules="[{ required: true, message: '角色不能为空' }]"
            >
              <el-select
                v-model="numberValidateForm.role"
                placeholder="请选择角色"
              >
                <el-option
                  v-for="(item, index) in RoleList"
                  :key="index"
                  :label="item.three_role"
                  :value="item.three_role"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="用户名 :"
              prop="name"
              :rules="[{ required: true, message: '用户名不能为空' }]"
            >
              <el-input
                type="name"
                v-model="numberValidateForm.name"
                autocomplete="new-password"
                placeholder="请填写用户名"
              ></el-input>
            </el-form-item>
            <!-- </div>
          <div class="flex-box"> -->
            <el-form-item
              label="联系电话 :"
              prop="mobile"
              :rules="[
                { required: true, message: '联系电话不能为空' },
                { type: 'number', message: '联系电话必须为数字值' },
              ]"
            >
              <el-input
                type="mobile"
                v-model.number="numberValidateForm.mobile"
                autocomplete="new-password"
                placeholder="请填写联系电话"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="性别 :"
              prop="sex"
              :rules="[{ required: true, message: '性别不能为空' }]"
            >
              <el-select
                v-model="numberValidateForm.sex"
                placeholder="请选择性别"
              >
                <el-option label="男" :value="1"></el-option>
                <el-option label="女" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="年龄 :"
              prop="age"
              :rules="[
                { required: true, message: '年龄不能为空' },
                { type: 'number', message: '年龄必须为数字值' },
              ]"
            >
              <el-input
                type="age"
                v-model.number="numberValidateForm.age"
                autocomplete="new-password"
                placeholder="请填写年龄"
              ></el-input>
            </el-form-item>
            <!-- </div>
          <div class="flex-box"> -->
            <el-form-item label="邮箱 :" prop="email">
              <el-input
                type="email"
                v-model="numberValidateForm.email"
                autocomplete="new-password"
                placeholder="请填写邮箱"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="密码 :"
              prop="password"
              :rules="[
                {
                  required: dType == 'add' ? true : false,
                  message: '密码不能为空',
                },
              ]"
            >
              <el-input
                type="password"
                v-model="numberValidateForm.password"
                autocomplete="new-password"
                placeholder="请填写密码"
              ></el-input>
            </el-form-item>
            <div style="width:480px;"></div>
          </div>
          <p class="tipss">
            注:<span>*</span>为必填项
          </p>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="qx" @click="showAdd = false">
          取消
        </div>
        <div class="qd" @click="addUser">
          确 定
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  fields,
  updateAccount,
  listOfExternal,
  liststatus,
  sousuo,
  addUser,
  addUser2,
  OrgDownBox,
  deleteUser,
  userInsideInfo,
  updateUser,
  updateUser2,
  getRole2,
  ThreeDownBox,
} from "@/api/system";

export default {
  data() {
    return {
      showPass: false,
      showReject: false,
      operateId: "",
      showAdd: false,
      showDel: false,
      // 页面切换
      kaiguan: true,
      // 内部搜索
      select: [],
      keyword: "",
      status: "", //状态
      one_org: "",
      two_department: "",
      searchOption1: {
        key: "",
        status: "",
        one_org: "",
        two_department: "",
      },
      total: "",
      rolePage: 1,
      userList: [],

      // 外部搜索
      keyword1: "",
      searchOption2: {
        key: "",
      },
      total2: "",
      page: 1,
      list2: [],
      //
      dType: "",
      // 下拉框
      industry: [], // 状态
      districtOptions: [], // 市直 县区
      downBox: [], //  二层级  接口
      downBox_not_district: [], //  二层级  接口
      RoleList: [], //  三层机  角色
      userId: "",
      idx: [],
      numberValidateForm: {
        age: "",
        sex: "",
        email: "",
        password: "",
        name: "", //用户名
        position: "", //职务
        real_name: "", //姓名
        level: "", //职级
        unit: "", //所在机构
        section: "", //所在部门
        leader: "", //直属领导
        mobile: "", //手机电话
        create_time: "",
        role: "", //所属县区市直
        organization: "",
        district_name: "", //所属县区市直
      },
    };
  },
  created() {
    // 搜索内部用户、外部用户
    this.searchByInside();
    this.searchByOutside();
    this.getRoleList();
    // 获取筛选框
    this.OrgDownBox();
    this.OrgDownBox_not_district();
    this.fields();
  },
  methods: {
    changeDistrict(val) {
      console.log(val);
      if (val == "太原市") {
        this.numberValidateForm.organization[0] == "县级单位"
          ? (this.numberValidateForm.organization = [])
          : "";
        this.downBox_not_district = this.downBox_not_district.map((item) => {
          if (item.label == "县级单位") {
            item.disabled = true;
          }
          return item;
        });
      } else {
        this.downBox_not_district = this.downBox_not_district.map((item) => {
          if (item.label == "县级单位") {
            item.disabled = false;
          }
          return item;
        });
      }
    },
    setOptionByInside() {
      this.searchOption1 = {
        key: this.keyword, //搜索框
        status: this.status,
        one_org: this.one_org,
        two_department: this.two_department,
      };
      this.rolePage = 1;
      this.searchByInside();
    },
    setOptionByOutside() {
      this.searchOption2 = {
        key: this.keyword1,
      };
      this.page = 1;
      this.searchByOutside();
    },
    clear() {
      if (this.kaiguan) {
        this.keyword = "";
        this.status = "";
        this.one_org = "";
        this.two_department = "";
        this.select = [];
        this.searchOption1 = {
          key: "", //搜索框
          status: "",
          one_org: "",
          two_department: "",
        };
        this.rolePage = 1;
        this.searchByInside();
      } else {
        this.searchOption2 = {
          key: "", //搜索框
        };
        this.keyword1 = "";
        this.page = 1;
        this.searchByOutside();
      }
    },
    // 局内  searchByInside
    async searchByInside() {
      const res = await sousuo({
        page: this.rolePage,
        perpage: 10,
        key: this.searchOption1.key, //搜索框
        status: this.searchOption1.status,
        one_org: this.searchOption1.one_org,
        two_department: this.searchOption1.two_department,
      });
      if (res.code && res.code != 0) {
        this.$message.error(res.msg);
      } else {
        this.list2 = [...res.df].map((item, index) => {
          item.index = index + 1;
          return item;
        });
        this.total = res.size;
      }
    },
    // 外部  searchByOutside
    async searchByOutside() {
      const res = await listOfExternal({
        page: this.page, //分页页码
        perpage: 10, //页面大小
        key: this.searchOption2.key, //查询条件
      });
      this.userList = [...res.df].map((item, index) => {
        item.index = index + 1;
        return item;
      });
      this.total2 = res.size;
    },
    // 内部用户 --- 新增  编辑 角色下拉框
    async getRoleList() {
      let res = await getRole2();
      console.log(res);
      this.RoleList = res;
    },
    // async ThreeDownBox() {
    //   let res = await ThreeDownBox();
    //   console.log(res);
    //   this.RoleList = res;
    // },
    // 内部用户 --- 搜索二级下拉框
    async OrgDownBox_not_district() {
      let res = await OrgDownBox();
      res.map((item) => {
        if (item.label == "县级单位") {
          item.children = null;
        }
      });
      this.downBox_not_district = res;
    },
    async OrgDownBox() {
      let res = await OrgDownBox();
      let options = [{ label: "太原市", value: "太原市" }];
      res.map((item) => {
        if (item.label == "县级单位") {
          item.children.map((i) => {
            options.push(i);
          });
        }
      });
      this.districtOptions = options;
      this.downBox = res;
    },
    // 内部用户 --- 状态下拉框
    async fields() {
      const res = await fields({});
      this.industry = res.status;
    },
    //内部用户 ---  所在机构筛选
    handleChange(val) {
      this.one_org = val[0] || "";
      this.two_department = val[1] || "";
    },
    //内部用户 ---  关闭通过弹框
    closeId() {
      this.operateId = "";
      this.showPass = false;
      this.showReject = false;
    },
    // 内部用户 --- 通过 驳回
    operate(type) {
      if (type == 1) {
        this.updateAccount(this.operateId, 1);
        this.operateId = "";
        this.showPass = false;
      } else {
        this.updateAccount(this.operateId, 3);
        this.operateId = "";
        this.showReject = false;
      }
    },
    // 内部用户 --- 点击驳回设置驳回id
    setOperateId(id, type) {
      this.operateId = id;
      if (type == 3) {
        this.showReject = true;
      } else if (type == 1) {
        this.showPass = true;
      }
    },
    // 内部用户 --- 列表多选
    handleSelectionChange(val) {
      let idList = [];
      val.map((item) => {
        idList.push(item.id);
      });
      this.idx = idList;
    },
    // 内部用户 --- 状态修改
    async updateAccount(a, b) {
      const res = await updateAccount({
        id: a,
        status: b,
      });
      if (res.code == 0) {
        this.$message({
          message: res.msg,
          type: "success",
        });
        this.searchByInside();
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
        this.searchByInside();
      }
    },
    // 内部用户 --- 关闭删除弹框
    closeDel() {
      this.showDel = false;
    },
    // 内部用户 --- 删除用户
    delUser() {
      if (this.idx.length == 0) {
        this.$message.warning("请选择要删除的用户！");
        return;
      }
      this.showDel = true;
    },
    // 内部用户 --- 删除
    async deleteUser() {
      const res = await deleteUser({ id: this.idx });
      if (res.code == 0) {
        this.$message({
          message: res.msg,
          type: "success",
        });
        this.searchByInside();
        this.idx = [];
        this.showDel = false;
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
        this.searchByInside();
      }
    },
    // 内部用户 ---密码验证
    allSame(value) {
      let data = value.split("");
      let chartCode = []; // 存放ASCII码
      let same = true;
      for (let i in data) {
        chartCode.push(value.charCodeAt(i));
        if (chartCode.length === data.length) {
          for (let i = 1; i <= chartCode.length; i++) {
            if (Math.abs(Number(chartCode[i]) - Number(chartCode[i - 1])) > 1) {
              same = false;
              break;
            }
          }
        }
      }
      return same;
    },
    // 内部用户 --- 密码验证
    passMessage(s) {
      var i = /[0-9]+/;
      var str = /[A-Za-z]/;
      var spec = /[,.<>{}~!@#$%^&*]/;
      if (!str.test(s)) {
        return "密码中必须包含字母";
      }
      if (!i.test(s)) {
        return "密码中必须包含数字";
      }
      if (!spec.test(s)) {
        return "密码中必须包含特殊字符。例如：!@#$%^&* 其中一个或多个";
      }
    },
    // 内部用户 --- 编辑
    async updateUser(id) {
      if (
        this.numberValidateForm.sex == 1 ||
        this.numberValidateForm.sex == 2
      ) {
      } else {
        if (this.numberValidateForm.sex == "男") {
          this.numberValidateForm.sex = 1;
        } else {
          this.numberValidateForm.sex = 2;
        }
      }
      if (this.numberValidateForm.age == "") {
        this.$message({
          message: "请填写年龄",
          type: "error",
        });
        return false;
      }

      const res = await updateUser2({
        id: this.userId,
        real_name: this.numberValidateForm.real_name,
        position: this.numberValidateForm.position,
        leader: this.numberValidateForm.leader,
        mobile: this.numberValidateForm.mobile.toString(),
        sex: this.numberValidateForm.sex,
        age: this.numberValidateForm.age,
        email: this.numberValidateForm.email,
        name: this.numberValidateForm.name,
        password: this.numberValidateForm.password || "",
        one_org: this.numberValidateForm.organization[0],
        two_department:
          this.numberValidateForm.organization[0] == "县级单位"
            ? this.numberValidateForm.district_name
            : this.numberValidateForm.organization[1] || "",
        three_role: this.numberValidateForm.role,
        district_name: this.numberValidateForm.district_name,
      });
      if (res.code == 0) {
        this.$message({
          message: res.msg,
          type: "success",
        });
        this.searchByInside();
        this.showAdd = false;
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
      }
    },
    // 内部用户 --- 增加
    newUser() {
      this.showAdd = true;
      this.dType = "add";
      this.$refs["numberValidateForm"]
        ? this.$refs["numberValidateForm"].resetFields()
        : "";
      this.numberValidateForm.real_name = "";
      this.numberValidateForm.position = "";
      this.numberValidateForm.organization = [];
      this.numberValidateForm.role = "";
      this.numberValidateForm.level = "";
      this.numberValidateForm.mobile = "";
      this.numberValidateForm.sex = "";
      this.numberValidateForm.age = "";
      this.numberValidateForm.email = "";
      this.numberValidateForm.name = "";
      this.numberValidateForm.password = "";
    },
    // 内部用户 --- 新增用户
    async addUser() {
      this.$refs["numberValidateForm"].validate(async (valid) => {
        if (valid) {
          if (this.dType == "edit") {
            this.updateUser(this.userId);
            return;
          }
          let msg = this.passMessage(this.numberValidateForm.password);
          if (msg) {
            this.$message({
              message: msg,
              type: "error",
            });
            return false;
          }
          if (this.numberValidateForm.password.length < 8) {
            this.$message({
              message: "密码长度应8位以上",
              type: "error",
            });
            return false;
          }
          if (this.allSame(this.numberValidateForm.password)) {
            this.$message({
              message: "不能使用连续性字母，数字作为密码",
              type: "error",
            });
            return false;
          }

          const res = await addUser2({
            real_name: this.numberValidateForm.real_name,
            position: this.numberValidateForm.position,

            leader: this.numberValidateForm.leader,
            mobile: this.numberValidateForm.mobile.toString(),
            sex: this.numberValidateForm.sex,
            age: this.numberValidateForm.age,
            email: this.numberValidateForm.email,
            name: this.numberValidateForm.name,
            password: this.numberValidateForm.password,
            one_org: this.numberValidateForm.organization[0],
            two_department:
              this.numberValidateForm.organization[0] == "县级单位"
                ? this.numberValidateForm.district_name
                : this.numberValidateForm.organization[1] || "",
            three_role: this.numberValidateForm.role,
            district_name: this.numberValidateForm.district_name,
          });
          if (res.code == 0) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.showAdd = false;
            this.$refs["numberValidateForm"].resetFields();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
          this.searchByInside();
        } else {
          return false;
        }
      });
    },
    //内部用户 --- 获取单个用户
    async userInsideInfo(e) {
      this.dType = "edit";
      this.showAdd = true;
      this.userId = e;
      const res = await userInsideInfo({
        id: this.userId,
      });
      this.numberValidateForm.age = res.age;
      this.numberValidateForm.sex = res.sex;
      this.numberValidateForm.email = res.email;
      this.numberValidateForm.password = res.password;
      this.numberValidateForm.name = res.name;
      this.numberValidateForm.position = res.position;
      this.numberValidateForm.real_name = res.real_name;
      this.numberValidateForm.district_name = res.district_name;
      this.numberValidateForm.role = res.three_role;
      if (res.one_org == "领导小组" || res.one_org == "县级单位") {
        this.numberValidateForm.organization = [res.one_org];
      } else {
        this.numberValidateForm.organization = [
          res.one_org,
          res.two_department,
        ];
      }

      this.numberValidateForm.leader = res.leader;
      this.numberValidateForm.mobile = parseInt(res.mobile);
    },
    // 内部用户分页
    handleCurrentChangejunei(val) {
      this.rolePage = val;
      this.searchByInside();
    },

    // 外部用户 修改状态
    async ChangeStatus(status, id) {
      const res = await liststatus({
        id,
        status: status == 1 ? 2 : 1,
      });
      if (res.code == 0) {
        this.$message.success(res.msg);
        this.searchByOutside();
      } else {
        this.$message.error(res.msg);
      }
    },
    // 外部用户分页
    handleCurrentChange(val) {
      this.page = val;
      this.searchByOutside();
    },
  },
};
</script>

<style lang="less" scoped>
.soso_box {
  height: 100%;
  overflow: hidden;
  zoom: 1;
  background: #fff;
}
.head {
  padding-left: 20px;
  height: 70px;
  line-height: 70px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #446db3;
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(4, 0, 0, 0.1);
  text-align: left;
  span {
    margin-right: 75px;
    display: inline-block;
    height: 70px;
    font-size: 20px;
    font-weight: 400;
    color: #333333;
    cursor: default;
  }
  span.active {
    font-weight: bold;
    color: #446db3;
    border-bottom: 4px solid #446db3;
  }
}
.content {
  height: calc(100% -80px);
  padding: 20px;
}
.ipt {
  display: flex;
  width: 100%;
  margin: 10px 0 20px;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-align: left;
  zoom: 1;
  li {
    flex: 0 0 25%;
    height: 31px;
    float: left;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    color: #333333;
    /deep/ .el-select {
      width: 180px;
      height: 30px;

      input {
        width: 180px;
        height: 30px;
        background: #ffffff;
        border: 1px solid #dddddd;
      }

      /deep/ .el-input__icon {
        line-height: 30px !important;
      }
    }
    /deep/ .el-input {
      width: 160px;
      height: 30px;
      input {
        width: 160px;
        height: 30px;
        color: #333;
        background: #ffffff;
        border: 1px solid #dddddd;
      }

      ::-webkit-input-placeholder {
        font-size: 14px;
        color: #666666;
      }
    }
    .btn-s {
      display: inline-block;
      width: 100px;
      height: 30px;
      line-height: 30px;
      border-radius: 4px;
      font-size: 16px;
      text-align: center;
      cursor: default;
    }
    .search {
      margin-right: 20px;
      border: 1px solid #446db3;
      background: #446db3;
      color: #ffffff;
    }
    .clear-btn {
      color: #446db3;
      background: #ffffff;
      border: 1px solid #446db3;
    }
  }
}

.project_main {
  width: 100%;
  overflow: hidden;
  zoom: 1;

  .project_tit {
    overflow: hidden;
    zoom: 1;
    margin-bottom: 10px;

    dt:before {
      content: " ";
      padding: 0 3px 0 0;
      margin-right: 6px;
      background: #fe6a00;
    }

    dd {
      float: left;

      .el-checkbox {
        margin-right: 15px;
      }

      .xzeng_btn {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        background: #fe6a00;
        border-radius: 4px;
        font-size: 14px;
        text-align: center;
        color: #ffffff;
        margin: 1% 5px;
        padding: 0 20px;
        cursor: pointer;
      }

      .del_btn {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        border: 1px solid #fe6a00;
        border-radius: 4px;
        font-size: 14px;
        text-align: center;
        color: #fe6a00;
        margin: 1% 5px;
        padding: 0 20px;
        cursor: pointer;
      }

      .xiaz_btn {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        border: 1px solid #fe6a00;
        border-radius: 4px;
        font-size: 14px;
        text-align: center;
        color: #fe6a00;
        margin: 1% 5px;
        padding: 0 20px;
        cursor: pointer;
      }
    }
  }

  .project_tables {
    font-size: 14px;
    line-height: 44px;

    tr:nth-child(odd) {
      background: #f3f6fb;

      td {
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
      }
    }

    span {
      margin: 0 2%;
    }

    .chengzi_btn {
      color: #fe6a00;
      cursor: pointer;
    }

    .lvzi_btn {
      color: #2cb54c;
      cursor: pointer;
    }

    .zizi_btn {
      color: #135de6;
      cursor: pointer;
    }

    .redzi_btn {
      color: #e51313;
      cursor: pointer;
    }

    .bluezi_btn {
      color: #0ebbf3;
      cursor: pointer;
    }

    .huangzi_btn {
      color: #e69554;
      cursor: pointer;
    }

    /deep/ .el-button {
      background: none;
      padding: 0;
      border: 0;
    }
  }
}

/deep/ .el-button--primary {
  color: #fff;
  background-color: #fe6a00;
  border-color: #fe6a00;
}

/deep/ .el-popover {
  height: 600px;
  overflow: auto;
}

/deep/ .el-form-item__label {
  text-align: left;
  text-indent: 1em;
}

/deep/ .el-input {
  width: 80%;
}

/deep/ .el-form-item__content {
  text-align: left;
}

.shenqing {
  display: block;
  width: 100%;
  height: 70px;
  text-align: center;
  line-height: 70px;
}

/*弹窗*/
.dabox {
  /*display:none;*/
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2000;

  .neibox {
    width: 40%;
    height: 70%;
    background: #fff;
    margin-top: 10%;
    margin-left: 30%;
    overflow: auto;
    padding-bottom: 20px;

    /deep/ .el-input {
      width: 80%;
    }

    /deep/ .el-form-item__content {
      text-align: left;
    }

    p:nth-child(1) {
      display: block;
      width: 100%;
      height: 54px;
      background: #fff3eb;
      margin-bottom: 17px;
      text-align: left;
      text-indent: 1em;
      line-height: 54px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fe6a00;
    }
  }
}

.btn {
  text-align: center;
  margin-top: 10px;

  p {
    margin-top: 20px;
  }
}
/deep/.el-checkbox__label {
  display: none;
}
/deep/.el-input__icon {
  line-height: 27px;
}
.btn-group {
  text-align: left;
  span {
    display: inline-block;
    margin-bottom: 20px;
    width: 120px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    background: #f89718;
    border-radius: 4px;
    font-size: 16px;
    color: #ffffff;
    cursor: default;
  }
  .add {
    margin-right: 30px;
  }
}

/deep/ .el-table--border th.el-table__cell {
  padding: 0;
  height: 48px;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  background: #446db3;
  border-right: none;
}
/deep/
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background: #f7faff;
}

/deep/ .el-pagination {
  text-align: right;
  margin: 20px 25px 0 0;
}
/deep/ .el-pager li {
  margin: 0 8px;
  min-width: 40px;
  height: 40px;
  line-height: 40px;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
  font-size: 16px;
  color: #666666;
}
/deep/ .el-pager li.active {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  background: #5889dc;
  box-shadow: 0px 0px 3px 0px rgba(0, 50, 89, 0.4);
}
/deep/ .el-pagination button {
  padding: 0;
  width: 40px;
  height: 40px;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
}
.btn-o {
  display: inline-block;
  width: 50px;
  height: 24px;
  line-height: 24px;
  background: #f89718;
  border-radius: 4px;
  font-size: 14px;
  color: #ffffff;
  cursor: default;
}

.btn-b {
  display: inline-block;
  width: 50px;
  height: 24px;
  line-height: 24px;
  background: #5889dc;
  border-radius: 4px;
  font-size: 14px;
  color: #ffffff;
  cursor: default;
}

/deep/ .el-dialog {
  padding: 0 40px;
  width: 720px !important;
  height: 300px !important;
  top: 50%;
  margin-top: -150px !important;
  box-shadow: 0px 5px 50px 0px rgba(186, 186, 186, 0.5);
  border-radius: 20px;
}
/deep/.add-dialog .el-dialog {
  width: 1800px !important;
  height: 600px !important;
  top: 50%;
  margin-top: -300px !important;
}
/deep/ .add-dialog .el-dialog__body {
  padding: 50px 0;
}
/deep/ .add-content .flex-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .el-input {
    width: 350px;
  }
  .el-input__inner {
    width: 350px;
  }
  .el-form-item__label {
    width: 130px !important;
    font-size: 18px;
    color: rgba(51, 51, 51, 1);
  }
  .el-form-item__content {
    margin-left: 130px !important;
  }
  // & > div {
  //   flex: 0 0 33%;
  // }
}
.tipss {
  text-align: right;
  font-size: 14px;
  color: #999999;
  line-height: 33px;
  span {
    color: #ff0000;
  }
}
/deep/ .el-dialog__header {
  padding-top: 30px;
  height: 100px;
  line-height: 70px;
  border-bottom: 1px dashed #ddd;

  .el-dialog__title {
    font-size: 30px;
    font-weight: bold;
    color: #446db3;
  }
}

/deep/.el-dialog__body {
  padding: 30px 20px;
  .tips {
    font-size: 24px;
  }
  li {
    margin: 0 auto;
    span {
      width: 80px !important;
      padding: 0 !important;
      font-size: 18px;
      color: #333333;
    }
    .el-input__inner {
      width: 350px;
      height: 54px;
      background: #f7f7f7 !important;
      border-radius: 8px;
      border: none !important;
    }
  }
}
/deep/.dialog-footer {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  .qx {
    display: inline-block;
    width: 247px;
    height: 48px;
    line-height: 44px;
    border: 2px solid #446db3;
    border-radius: 10px;
    font-size: 26px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #446db3;
    text-align: center;
    cursor: default;
  }
  .qd {
    display: inline-block;
    width: 247px;
    height: 48px;
    line-height: 44px;
    background: #446db3;
    box-shadow: 0px 2px 5px 0px rgba(68, 109, 179, 0.5);
    border: 2px solid #446db3;
    border-radius: 10px;
    font-size: 26px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    cursor: default;
  }
}
/deep/ .el-icon-close:before {
  content: "";
  display: block;
  width: 21px;
  height: 20px;
  background: url("~@img/system/icon-close.png");
}
/deep/.el-dialog__headerbtn {
  right: 50px;
}
/deep/.ipt .el-cascader {
  position: relative;
  font-size: 14px;
  line-height: 31px;
}

/*
  *常用电脑尺寸  1600 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  /deep/ .table1 .el-table--border {
    height: 480px !important;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  /deep/ .table1 .el-table--border {
    height: 460px !important;
  }
  /deep/ .table2 .el-table--border {
    height: 480px !important;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  /deep/ .table1 .el-table--border {
    height: 480px !important;
  }
  /deep/ .table2 .el-table--border {
    height: 530px !important;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  /deep/ .table1 .el-table--border {
    height: 540px !important;
  }
  /deep/ .ipt li .el-input {
    width: 146px;
    input {
      width: 146px;
    }
  }
  /deep/ .add-dialog .el-dialog {
    width: 1000px !important;
    height: 700px !important;
    top: 50%;
    margin-top: -350px !important;
  }
  /deep/ .add-content .flex-box .el-input__inner {
    width: 300px;
  }
  /deep/ .add-content .flex-box .el-input {
    width: 300px;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  /deep/ .table1 .el-table--border {
    height: 430px !important;
  }
  /deep/ .table2 .el-table--border {
    height: 480px !important;
  }
  .ipt li {
    font-size: 12px;
    .btn-s {
      width: 80px;
      font-size: 12px;
    }
  }
  /deep/ .ipt li .el-input {
    width: 112px;
    input {
      width: 112px;
    }
  }
  /deep/ .ipt li .el-select {
    width: 112px;
    input {
      width: 112px;
    }
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  /deep/ .table1 .el-table--border {
    height: 380px !important;
  }
  /deep/ .table2 .el-table--border {
    height: 400px !important;
  }
  .ipt li {
    font-size: 12px;
    .btn-s {
      width: 60px;
      font-size: 12px;
    }
  }
  .ipt li:first-of-type {
    flex: 0 0 27%;
  }
  /deep/ .ipt li .el-input {
    width: 90px;
    input {
      width: 90px;
    }
  }
  /deep/ .ipt li .el-select {
    width: 90px;
    input {
      width: 90px;
    }
  }
}
</style>
